<template>
	<div class="zBox" ref="zBox">
		<div class="top" ref="top">
			<el-form class="formCs" ref="ruleFormRef" :model="addForm" :rules="projectRules" label-width="78px">
				<el-form-item class="xmcy" label="通知人员" prop="personIds">
					<el-tree-select
						v-model="addForm.personIds"
						:data="userSelectData"
						multiple
						:render-after-expand="false"
						label="label"
						value-key="id"
						show-checkbox
						check-on-click-node
					/>
					<div class="cx" style="margin-left:20px" @click="changeTzr">确定</div>
				</el-form-item>
			</el-form>
		</div>
		<div class="bottom">
			<div class="qjButtonBox">
				<div v-if="isAddProject || permissions.indexOf('project:add') > -1" class="qjBut" @click="addProject">
					<el-icon style="vertical-align: middle" :color="'#ffffff'"><Edit /></el-icon>
					<span style="vertical-align: middle;margin-left: 8px;">新增项目</span>
				</div>
			</div>
			<el-table
				v-if="zBoxHeight"
				class="qjTable"
				v-loading="loading"
				:data="tableList"
				stripe
				:height="isAddProject || permissions.indexOf('project:add') > -1 ? zBoxHeight - topHeight - 150 : zBoxHeight - topHeight - 112"
			>
				<el-table-column prop="visitorName" label="姓名" align="center"></el-table-column>
				<el-table-column prop="phone" label="联系方式" align="center"></el-table-column>
				<el-table-column prop="companyName" label="单位名称" align="center"></el-table-column>
				<el-table-column prop="deptName" label="部门" align="center"></el-table-column>
				<el-table-column prop="position" label="职位" align="center"></el-table-column>
				<el-table-column prop="visitReason" label="来访事由" width="300" show-overflow-tooltip align="center"></el-table-column>
				<el-table-column prop="visitTime" label="拜访时间" align="center"></el-table-column>
				<el-table-column prop="createTime" label="创建时间" align="center"></el-table-column>
			</el-table>
			<pagination id="pagination" v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
		</div>
	</div>
</template>

<script lang="ts" setup>
import { recordList ,getDeptUser,getRemindUser,configUser} from '@/api/hkd';
import useUserStore from '@/store/modules/user';
import { ElMessage, ElMessageBox } from 'element-plus';
import type { FormInstance, FormRules } from 'element-plus';
import router from '@/router/index.js'

const userSelectData = ref([

]);






const ruleFormRef = ref<FormInstance>()
const loading = ref(true);
const tableList = ref([]);
const { proxy } = getCurrentInstance();
const { project_status } = proxy.useDict('project_status');
const auditList = ref([]);
const dialog = ref(false);
const total = ref(0);
const projectId  = ref('');
const userId = ref(useUserStore().userId);
const isAddProject = ref(useUserStore().isAddProject);
const permissions = ref(useUserStore().permissions);
 const top = ref(null);
 const zBox = ref(null);
 const topHeight = ref('');
 const zBoxHeight = ref('');
const data = reactive({
	queryParams: {
		pageNum: 1,
		pageSize: 10,
		startTime: '',
		endTime: '',
		name: ''
	},
	addForm:{

	},
	rules: {
		content: [{ required: true, message: '请输入跟进记录', trigger: 'change' }]
	}
});
const qjzt = ref({
	1: { color: '#999999FF', label: '未启动' },
	2: { color: '#1AC45FFF', label: '进行中' },
	3: { color: '#FA6400', label: '已暂停' },
	4: { color: '#BE1A21FF', label: '待验收' },
	5: { color: '#000000', label: '已完成' },
	6: { color: '#6257ff', label: '已终止' }
});
const { queryParams,rules,addForm } = toRefs(data);
onMounted(() => {
	topHeight.value = top.value.clientHeight
	zBoxHeight.value = zBox.value.clientHeight

});
window.onresize = () => {
  topHeight.value = top.value.clientHeight
  zBoxHeight.value = zBox.value.clientHeight
}

function getList() {
	loading.value = true;
	recordList().then(response => {
		tableList.value = response.rows;
		total.value = response.total;
		loading.value = false;
	});
}
function getDeptUsers() {
	// this.treeParams.data = [];
	if (userSelectData.value.length > 0) {
		return;
	} else {
		getDeptUser().then(res=>{
			if(res.code =='200'){
				userSelectData.value = res.data[0].children
			}
		})
	}
	getRem()

}
function  getRem(){
	getRemindUser().then(res=>{
			if(res.code =='200'){

				addForm.value.personIds = res.userIds.split(',')
			}
		})
}
function changeTzr(){
	let personIds = addForm.value.personIds.join(',')
	configUser({userIds:personIds}).then((res)=>{
		if(res.code=='200'){
			ElMessage({ message: '修改成功！', type: 'success', duration: 1 * 1000 })
			getRem()
		}
	})
}
getDeptUsers();

getList();
</script>

<style lang="scss" scoped>
.qjButtonBox {
	padding: 10px 30px;
	padding-left: 0;
}
.qjBut {
	background: #be1a21;
	color: #ffffff;
	width: 100px;
	text-align: center;
	border-radius: 4px;
	padding: 10px 0;
	font-size: 0.875rem;
	cursor: pointer;
}
.dialog-footer button:first-child {
	margin-right: 10px;
}
:deep(.el-form) {
	.left {
		// height: 100px;
		border-right: 2px dashed #e5e1e1;
	}
}
.userOption {
	display: flex;
	align-items: center;
	width: 1.5rem;
	height: 1.5rem;
	border-radius: 50%;

	img {
		width: 100%;
		height: 100%;
		border-radius: 50%;
	}

	span {
		padding: 0 1rem;
	}
}
.sxm {
	margin-top: 20px;
}
.spBox,
.spBox2 {
	display: flex;
	flex-flow: column;

	p {
		margin-top: 0;
	}
	img {
		width: 45px;
		height: 45px;
		border-radius: 50%;
	}
}
.spBox2 {
	margin-right: 20px;
}
:deep(.left) {
	width: 50%;
	.el-form-item {
		display: flex;
		flex-flow: column;
	}
}
:deep(.right) {
	margin-left: 50px;
	width: 43%;
	.el-form-item {
		display: flex;
		flex-flow: column;
	}
	.spr,
	.csr {
		margin-bottom: 10px;
		.el-form-item__label {
			width: 70px !important;
		}
	}
}
.csrBox {
	margin-top: 20px;
	display: flex;
	max-height: 235px;
	overflow: auto;
	display: flex;
	flex-flow: wrap;
}
.csrBox::-webkit-scrollbar {
	display: none; /* Chrome Safari */
}
:deep(.qjTable) {
	overflow: auto;

	.el-table__header-wrapper,
	.el-table__fixed-header-wrapper {
		th {
			word-break: break-word;
			background-color: #f7f7f7 !important;
			color: #515a6e;
			height: 55px !important;
			font-size: 13px;
			border: none !important;
		}
	}
	.el-table__body-wrapper {
		.el-button [class*='el-icon-'] + span {
			margin-left: 1px;
		}
		.el-table__row {
			height: 52px !important;
			td {
				border: none !important;
				height: 52px !important;
			}
		}
	}
}
.ztbox {
	display: flex;
	align-items: center;
	justify-content: center;
	.dian {
		margin-right: 8px;
		width: 7px;
		height: 7px;
		border-radius: 50%;
	}
}
.czan {
	display: flex;
	justify-content: center;
}
.zBox {
	height: 100%;
}
:deep(.shbj) {
	background: url(../../assets/images/spbj.png) no-repeat;
	color: #be1a21;
	width: 140px;
	background-size: 100% 100%;
	padding: 5px 15px;
	font-size: 14px;
	margin-bottom: 10px;
	font-weight: 600;
}
.sptop {
	margin-top: 20px;
}
:deep(.bz) {
	.el-form-item__label {
		width: 50px !important;
	}
}
.red {
	color: #ff0000;
}
.spzt {
	width: 20px;
	height: 20px;
	display: inline-block;
	background-size: contain;
	margin-right: 10px;
}
.jdbox {
	position: relative;
}
.jdbox:last-child .xuLine {
	display: none;
}
.xuLine {
	position: absolute;
	width: 1px;
	height: 17px;
	border-left: 2px dashed rgb(204, 204, 204);
	left: 9px;
	top: 20px;
}
.top {
	background: #ffffff;
	padding: 20px 20px 2px 20px;
	border-radius: 10px;
}
// @media only screen and (max-width: 950px) {
// 	.bottom {
// 		height: calc(100% - 150px) !important;
// 	}
// }
// @media only screen and (max-width: 1620px) {
// 	.bottom {
// 		height: calc(100% - 120px) !important;
// 	}
// }
// @media only screen and (max-width: 850px) {
// 	.bottom {
// 		height: calc(100% - 200px) !important;
// 	}
// }
:deep(.bottom) {
	padding: 20px;
	background: #ffffff;
	border-radius: 0.625rem;
	// height: calc(100% - 93px);
	overflow: auto;
	margin-top: 20px;
	padding-top: 0;
}
#pagination {
	padding: 0 !important;
	margin: 0 !important;
	margin-top: 20px !important;
}
:deep(.xHeight) {
	.el-form-item__label {
		height: 40px;
		line-height: 40px;
	}
}
.pst {
	position: absolute;
	right: 36px;
	padding: 6px;
}
:deep(.tsgd) {
	.el-input {
		height: 40px;
	}
}
.ztbox {
	display: flex;
	align-items: center;
	justify-content: center;
	.dian {
		margin-right: 8px;
		width: 7px;
		height: 7px;
		border-radius: 50%;
	}
}
.qjBut {
	background: #be1a21;
	color: #ffffff;
	width: 100px;
	text-align: center;
	border-radius: 4px;
	padding: 10px 0;
	font-size: 0.875rem;
	cursor: pointer;
}
:deep(.xmcy) {
	.el-select {
		width: 400px;
	}
}
</style>
